<!DOCTYPE html>
<html lang="es-ec">
	<head>	
        	
		
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
        <meta name="description" content="Pagina web de cine" />
        <meta name="keywords" content="peliculas, estrenos,cine, actualidad, panoramas" />
        <meta name="author" content="CodecsCinema" />
        
		<title>Cinema</title>
		<link href="css-source/library.css" type="text/css" media="all" rel="stylesheet">
		<script type="text/javascript" src="js/consultas.js">  </script>
    
   
    	<script>
			function stopAnimation(){
				x = document.getElementsByTagName("figure");
						
				for (i=0; i < x.length; i++){
					x[i].setAttribute("class","noslideshow");;
				}
			}
			
			function continueAnimation(){
				x = document.getElementsByTagName("figure");
						
				for (i=0; i < x.length; i++){
					x[i].setAttribute("class","");;
				}
			}
			
			function genRank(){
				
				for(i=0;i<5;i++){
				star = "<img id=\""+i+"\" src=\"images/star_icon.gif\" width=\"30\" height=\"30\" onclick=\"newRank("+i+")\"/>";
				newdiv = document.createElement("div");
				newdiv.innerHTML=star;
				document.getElementById("rank").appendChild(newdiv);
				}
			}
			
			function newRank(ide){
				for(i=0;i<5;i++){
				x = document.getElementById(i);
				if (i>ide){
					x.style.opacity = "0.3";
				}else{
					 x.style.opacity= "1";
				}
				}
			}
			
			function mostrarTxtComentario() {	
				document.getElementById("comentar").style.visibility = "hidden";
				document.getElementById("txtComentario").style.display = "block";
				document.getElementById("contenedor").style.opacity = ".1";
			}

			function ocultarTxtComentar() {
				document.getElementById("comentar").style.visibility = "visible";
				document.getElementById("txtComentario").style.display = "none";
				document.getElementById("contenedor").style.opacity = "1";
			}

			function agregarComentario() {
				var text = document.getElementById("txtCom").value;
				var newp = document.createElement('p');
				newp.innerHTML = text;
				//newdiv.appendChild(newp);
				newp.setAttribute("class","comentario");
				document.getElementById("comentarios").appendChild(newp);
			}
		</script>
	</head>
	
	<body onload="infopelicula(),genRank()">
		<header class="page">
			<h1>Cinema</h1>
			<p class="byline">Eslogan <span class="author">Spoiller</span></p>

			<nav class="global">
				<!--Mediante JavaScript se agregaran los enlaces en ruta-->
			</nav>
		</header>
		<!--Articulo-->
		<article>
			<nav class="gallery">
				<!--Galeria de imagenes de acceso a peliculas en cartelera-->
				<ul>
					<li><figure>
							<img class="f" src="images/Prometheus-Movie-600x800.jpg" alt="Prometheus" onmouseover="stopAnimation()" onmouseout="continueAnimation()" width="304" height="228" />
							<figcaption>Prometheus</figcaption>
						</figure>
					</li>
					<li><figure>
							<img class="f" src="images/the-dark-knight-rises-poster-cartel.jpg" alt="The Dark Knight Rise" onmouseover="stopAnimation()" onmouseout="continueAnimation()" width="304" height="228" />
							<figcaption>The Dark Knight Rise</figcaption>
						</figure>
					</li>
					<li><figure>
							<img class="f" src="images/american-reunion.jpg" alt="American Pie Reunion" onmouseover="stopAnimation()" onmouseout="continueAnimation()" width="304" height="228" />
							<figcaption>American Pie Reunion</figcaption>
						</figure>
					</li>
					<li><figure>
							<img class="f" src="images/La-era-del-hielo-4-4-900x562.jpg" alt="Ice Age 4: Continental Drift" onmouseover="stopAnimation()" onmouseout="continueAnimation()" width="304" height="228" />
							<figcaption>Ice Age 4: Continental Drift</figcaption>
						</figure>
					</li>
					<li><figure>
							<img class="f" src="images/4361.jpg" alt="The Avengers" onmouseover="stopAnimation()" onmouseout="continueAnimation()" width="304" height="228" />
							<figcaption>The Avengers</figcaption>
						</figure>
					</li>
					<li><figure>
							<img class="f" src="images/Prometheus-Movie-600x800.jpg" alt="Prometheus" onmouseover="stopAnimation()" onmouseout="continueAnimation()" width="304" height="228" />
							<figcaption>Prometheus</figcaption>
						</figure>
					</li>
					<li><figure>
							<img class="f" src="images/the-dark-knight-rises-poster-cartel.jpg" alt="The Dark Knight Rise" onmouseover="stopAnimation()" onmouseout="continueAnimation()" width="304" height="228" />
							<figcaption>The Dark Knight Rise</figcaption>
						</figure>
					</li>
					<li><figure>
							<img class="f" src="images/american-reunion.jpg" alt="American Pie Reunion" onmouseover="stopAnimation()" onmouseout="continueAnimation()" width="304" height="228" />
							<figcaption>American Pie Reunion</figcaption>
						</figure>
					</li>
					<li><figure>
							<img class="f" src="images/La-era-del-hielo-4-4-900x562.jpg" alt="Ice Age 4: Continental Drift" onmouseover="stopAnimation()" onmouseout="continueAnimation()" width="304" height="228" />
							<figcaption>Ice Age 4: Continental Drift</figcaption>
						</figure>
					</li>
					<li><figure>
							<img class="f" src="images/4361.jpg" alt="The Avengers" onmouseover="stopAnimation()" onmouseout="continueAnimation()" width="304" height="228" />
							<figcaption>The Avengers</figcaption>
						</figure>
					</li>	
				</ul>
			</nav>
			
			<section   id="peli">             
				<br />
				<figure class="poster"><img id="graficopeli" src="x.jpg" alt="Poster" width="340" height="550"/>
                    <figcaption>				
            			<div id="rank"> 
            					<h3>RankingK</h3>
           				</div>
                        <a id="linkyou" href="#">Youtube</a>
                    </figcaption>
                </figure>
			</section>
		</article>
		<!--Pie de pagina con enlaces-->
		<aside id="Reserv">
			<form>
				<p>Nombre: <input style="text"/></p>
				<p>Horario Funci&oacute;n: <select>
				<option>10:30-12:30</option><option>13:00-15:00</option></select></p>
				<p>Teatro: <select><option>9 de Octubre</option><option>Mall del Sol</option></select></p>
				<p>Asiento: --</p>
				<p><button id="ReservBtn">Reservar</button>  <button id="CancelBtn">Cancelar</button></p>
			</form>
		</aside>
		<aside id="Map">
			<iframe width="425" height="350" src="http://maps.google.com.ec/maps?q=guayaquil+ecuador&amp;ie=UTF8&amp;hq=&amp;hnear=Guayaquil,+Guayas&amp;gl=ec&amp;ll=-2.203816,-79.897453&amp;spn=0.389039,0.676346&amp;t=m&amp;z=11&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com.ec/maps?q=guayaquil+ecuador&amp;ie=UTF8&amp;hq=&amp;hnear=Guayaquil,+Guayas&amp;gl=ec&amp;ll=-2.203816,-79.897453&amp;spn=0.389039,0.676346&amp;t=m&amp;z=11&amp;source=embed" style="color:#0000FF;text-align:left">Ver mapa más grande</a></small>
		</aside>
		<aside>
			<nav>
				<ul>
				<li><a id="fb" href="#"><img src="images/facebook_icon.jpg" width="30" height="30" alt="fbIcon"/></a></li>
				<li><a id="t" href="#"><img src="images/twiter_icon.jpg" width="30" height="30" alt="twrIcon"/></a></li>
				<li><a id="gp" href="#"><img src="images/google_plus_icon.jpg" width="30" height="30" alt="gplusIcon"/></a></li>
				</ul>
			</nav>
		</aside>
		<aside id="com">
			<h3>Comentarios</h3>
			<div id="comentarios">
				
			</div>
			
			<div id="comentar">
					<button id="btnComent" onclick="mostrarTxtComentario()">Comentar</button>
			</div>
			
			<div id="txtComentario" style="display: none;">
				<textarea id="txtCom"> </textarea>
				<div style="clear: both;">
					<button onclick="agregarComentario()">Aceptar</button>
					<button onclick="ocultarTxtComentar()">Cancelar</button>
				</div>
			</div>
		</aside>

		<footer class="page">
			<nav class="global">
				<ul>
					<li><a href="" target="_self">Home</a></li>
					<li><a href="" target="_self">About the Cinema</a></li>
					<li><a href="" target="_self">About the Movies</a></li>
					<li><a href="" target="_self">About the Site</a></li>
				</ul>
			</nav>
		</footer>
	</body>
</html>